<template>
  <view class="container">
    <view class="wrap">
      <mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="gauge" />
    </view>
    <view class="card-result">
      <view class="card-result-h">结果评估 <span>（满分为100分）</span></view>
      <view class="card-result-r">
        <view
          ><span class="car-title">测验表名</span
          ><span class="car-content" style="margin-right: -0.55rem">{{
            type_name
          }}</span></view
        >
        <view
          ><span class="car-title">测验分数</span
          ><span class="car-content">{{ score }}</span></view
        >
        <view
          ><span class="car-title">测验结果</span
          ><span class="car-content">{{ judge }}</span></view
        >
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from "../../components/mpvue-echarts/src/echarts.min.js";
import mpvueEcharts from "../../components/mpvue-echarts";

let chart = null;
let EScore = null;

function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
  });
  canvas.setChart(chart);

  var option = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '65%'],
            radius: '115%',
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.25, (function() {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#52B5FF'
                    }, {
                      offset: 0.5,
                      color: '#4EA4FF'
                    }, {
                      offset: 1,
                      color: '#498CFF'
                    }])
                  })()], [0.5, (function() {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#2BEFD1'
                    }, {
                      offset: 0.5,
                      color: '#16E1C9'
                    }, {
                      offset: 1,
                      color: '#04D5C2'
                    }])
                  })()],
                  [0.75, (function() {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#FDD75C'
                    }, {
                      offset: 0.5,
                      color: '#FDC249'
                    }, {
                      offset: 1,
                      color: '#FE9A27'
                    }])
                  })()],
                  [1, (function() {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#A4FBEC'
                    }, {
                      offset: 0.5,
                      color: '#73DEF5'
                    }, {
                      offset: 1,
                      color: '#3FBFFE'
                    }])
                  })()]
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              show: false,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              show: false,
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: '#999',
              distance: 40,
              fontSize: 20
            },
            title: {
              show: true,
              color: '#444B5F',
              fontSize: 25
            },
            startAngle: 180,
            endAngle: 0,
            splitNumber: 4,
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              color: '#333333',
              fontSize: 35
            },
            data: [
              {
                value: EScore,
                name: '最终评分结果'
              }
            ]
          }
        ]

      }
  chart.setOption(option);
  return chart;
}

export default {
  data() {
    return {
      echarts,
      onInit: initChart,
      size: "medium",
      score: "",
      judge: "",
      type_name: "",
    };
  },

  components: {
    mpvueEcharts,
  },
  onLoad(options) {
    // this.score = options.score,
    // this.judge = options.judge
    // this.type_name = options.type_name
    // EScore = Number(options.score)
	// mocke-nember
	this.score = 54,
    this.judge = 45
    this.type_name = 'name'
    EScore = 54
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #ffff;
  min-height: 100vh;
}
.wrap {
  width: 100%;
  height: 250px;
}
.card-result {
  margin: 0 10px;
  padding: 15px;
  background: #f2fbfd;
  border-radius: 1rem;
  text-align: left;
  font-size: 20px;
  &-h {
    span {
      font-weight: 400;
      color: #00aac6;
    }
    font-weight: 600;
  }
  &-r {
    display: flex;
    flex-direction: column;
    view {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    .car-title {
      font-size: 17px;
      &::before {
        content: "";
        border-left: 0.1rem solid #00aac6;
        border-radius: 1rem;
        margin-right: 5px;
        border-left-width: 5px;
      }
    }
    .car-content {
      font-size: 14px;
      color: #00aac6;
    }
  }
}
</style>
